<template>
  <el-form ref="editForm" :model="formFileds">
    <div class="personal">
      <div style="font-size:20px; font-weight: bold;">个人信息</div>

      <el-form ref="editForm" :model="formFileds" label-width="100px" style="padding-top:3%;"  size="mini" >
 
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="用户名:" prop="userNname">用户名
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="" prop="userNname">（用户名为登陆账号，请牢记）</el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="手机号:" prop="mobile">12345678912
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="" prop="mobile">（手机号可作为登陆账号，请牢记）</el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="邮箱:" prop="mailbox">5516513@.com
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="" prop="mailbox">
              <span style="color: crimson;">&nbsp;立即绑定</span>
              （邮箱可用于快速找回登陆密码，请牢记）
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>

    </div>

    <div class="safety">
      <div style="font-size:20px; font-weight: bold;">安全服务</div>

      <el-form ref="editForm" :model="formFileds" label-width="100px" style="padding-top:3%;"  size="mini" >
        <el-row :gutter="24">
          <el-col :span="18">
            <el-form-item label="登录密码:" prop="password">互联网账号存在被盗风险，建议您定期更换密码
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="" prop="userNname" style="color: crimson;">修改密码</el-form-item>
          </el-col>
          <el-divider></el-divider>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="18">
            <el-form-item label="手机绑定:" prop="binding">可作为登陆账号，可用于接收短信提醒
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="" prop="mobile" style="color: crimson;">修改</el-form-item>
          </el-col>
          <el-divider></el-divider>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="18">
            <el-form-item label="注销账号:" prop="closeAccount">注销后无法恢复，请谨慎操作
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="" prop="closeAccount" style="color: crimson;">注销</el-form-item>
          </el-col>
          <el-divider></el-divider>
        </el-row>

      </el-form>
    </div>
  </el-form>
</template>
   
<script>
export default {
  components: {

  },
  data() {
    return {
      formFileds: {
        input: '',
        userNname: '',
        mobile: '',
        mailbox: '',
        password: '',
        binding: '',
        closeAccount: '',
      },
    }
  },
  push() {




  },
  methods: {
    dialogClose() {
      this.$emit('dialogClose')
    },
  }
}

</script>
  
<style scoped lang="less">
.personal {
  width: 60%;
  margin: 0 auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 2%;
  margin-bottom: 20px;
}

.safety {
  width: 60%;
  margin: 0 auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 2%;
}
.el-form-item {

  font-size: 16px;
}
.el-divider{
  margin-top: 5%;
}
</style>
  